<template>
      <div class="orders">
    <my-bread :breadList="breadList"></my-bread>
     <el-card>
     <div class="top">
      <el-input   placeholder="请输入内容" v-model="getOrderFn.query" class="input-with-select cc">
      <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
     </el-input>
     </div>
        <el-table
    :data="orderData"
    border
    style="width: 100%">
    <el-table-column
      label="#"
      type="index"
      width="100">
    </el-table-column>
    <el-table-column
      prop="order_number"
      label="订单编号"
      width="120">
    </el-table-column>
     <el-table-column
      prop="order_price"
      label="订单价格"
      width="120">
    </el-table-column>
    <el-table-column
      prop="order_pay"
      label="是否付款"
      width="120">
      <template slot-scope="scope">
        <el-tag :type="scope.row.pay_status | paycolor ">{{scope.row.pay_status | pay}}</el-tag>
	</template>
    </el-table-column>
    <el-table-column
      prop="is_send"
      label="是否发货"
      width="120">
    </el-table-column>
    <el-table-column
      prop="role_name"
      label="下单时间"
      width="300">
      <template slot-scope="scope">
                <p>{{scope.row.create_time | timer1}}</p>
            </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
  <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
  <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
      </template>
    </el-table-column>
  </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="getOrderFn.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="getOrderFn.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
     </el-card>
     </div>
</template>

<script>
import { getorders } from "@/http/orders.js";
import _ from "lodash"
getorders
export default {
   data(){
    return {
        total:"",
        getOrderFn: {
        query: "",
        pagenum: 1,
        pagesize: 5
      },
        orderData:[],
        breadList: [
        {
          path: "/home",
          title: "首页"
        },
        {
          path: "",
          title: "商品管理"
        },
        {
          path: "/params",
          title: "参数列表"
        }
      ]
    }
   },
   created(){
    this.getorders()
   },
   methods:{
    async getorders(){
    let res=await getorders(this.getOrderFn)
     console.log(res);
     this.orderData=res.data.goods
     this.total = res.data.total;
    },
   search: _.debounce(function() {
      this.getOrderFn.pagenum = 1;
      this.getorders()
    }, 2000),
    handleSizeChange(val) {
      this.getOrderFn.pagesize = val;
      this.getorders()
    },
    handleCurrentChange(val) {
      this.getOrderFn.pagenum = val;
      this.getorders()
    },
   }
}
</script>

<style>

</style>
